<button nz-button nzType="primary" (click)="showModal()">数据导入</button>

<nz-modal [(nzVisible)]="isVisible" *ngIf="isVisible" nzTitle="数据导入" [nzFooter]="null" nzWidth="600px" (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()" [nzMaskClosable]="false">
    <form [formGroup]="validateForm">
        <div nz-row nzGutter="16" class="main-section">
            <div nz-col class="gutter-row" nzSpan="6">
                <div class="label">图层组名称</div>
            </div>
            <div nz-col class="gutter-row" nzSpan="16">
                <input formControlName="layersName" nz-input style="width: 100%" placeholder="例:阿荣旗耕地监测">
            </div>
        </div>

        <div nz-row nzGutter="16" class="main-section">
            <div nz-col class="gutter-row" nzSpan="6">
                <div class="label">选择本地数据文件</div>
            </div>
            <div nz-col class="gutter-row" nzSpan="16">
                <nz-upload nzType="drag" [nzBeforeUpload]="beforeUpload" [(nzFileList)]="fileList">
                    <p class="ant-upload-drag-icon">
                        <i nz-icon nzType="upload"></i>
                    </p>
                    <p class="ant-upload-text">单击或拖动文件到此区域</p>
                    <br>
                    <p class="ant-upload-hint" style="padding: 0 24px">
                        注意:文件必须是zip压缩包，且第一级文件为shpfile文件，可以包含SLD样式文件,支持批量上传
                    </p>
                </nz-upload>
            </div>
            <input type="hidden" formControlName="files">
        </div>
    </form>
    <div nz-row nzGutter="16" class="main-section">
        <div class="button-group">
            <button nz-button nzType="default" (click)="resetForm()">重置</button>
            <button nz-button nzType="primary" (click)="submitForm()" [nzLoading]="submitLoading">提交</button>
        </div>
    </div>
</nz-modal>
